import { Card } from 'antd';
import { DeleteOutlined, EditOutlined, SettingOutlined } from '@ant-design/icons';

export interface CardDetail {
  id: string;
  image: any;
  url: string;
  remark: string;
  c_time:any;
  lane: string;
}

interface CardItemProps {
  detail: CardDetail;
  image: any;
  handleDelete: (id: CardDetail) => void;
  handleEdit: (item: CardDetail, id: CardDetail) => void;
}

const BannerCard = (props: CardItemProps) => {
  const { Meta } = Card;
  const { detail, image, handleDelete, handleEdit } = props;
  return (
    <Card
      className={detail.id}
      style={{ width: 200, marginRight: 30, marginBottom: 30 }}
      hoverable
      cover={<img alt="example" src={image} />}
      actions={[
        <SettingOutlined key="setting" />,
        <EditOutlined key="edit" onClick={handleEdit} />,
        <DeleteOutlined key="delete" onClick={handleDelete} />,
      ]}
    >
      <Meta title={'备注:' + detail.remark} description={'跳转路径:' + detail.url} />
      权重:{detail.lane}
    </Card>
  );
};

export default BannerCard;
